/* ==========================================================================
   8. RESPONSIVE DESIGN (Mobile adjustments)
   ========================================================================== */
   @media (max-width: 768px) {
    /* Stack layout cleanly */
    header {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 16px;
        align-items: center;
    }

    /* Standard avatar on small displays */
    .header-avatar {
        width: 60px;
        height: 60px;
    }

    /* Centers the entire stack nicely below the avatar on mobile */
    .logo-group {
      margin-top: 8px;
  }

    /* Wrap navigation buttons to adapt to narrow screens if necessary */
    header nav {
        justify-content: center;
        width: 100%;
    }

    header nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        width: 100%;
    }

    /* Slim down button size slightly for mobile fingers */
    header nav a {
        padding: 8px 14px;
        font-size: 0.85rem;
    }

    .hero-content h1 {
        font-size: 2.5rem;
    }

    section {
        padding: 60px 20px;
    }
}